<template>
  <!-- site -->
  <div class="site-wrapper">
    <div class="main-overlay"></div>
    <!-- header -->
    <header class="header-default">
      <navbar></navbar>
    </header>
    <!-- section main content -->
    <section class="main-content">
      <div class="container-xl">
        <div class="row gy-4">
          <div class="col-lg-8">
            <!-- section header -->
            <!-- <div class="section-header">
               <h3 class="section-title">最新文章</h3>
               <img th:src="@{|/${WEB_THEME}/images/wave.svg|}" class="wave" alt="wave" /></div>-->
            <div class="padding-30 rounded bordered">
              <div class="row">
                <div class="post post-list clearfix" v-for="item in records" >
                  <div class="thumb rounded">
                    <span class="post-format-sm"><i class="icon-picture"></i></span>
                    <router-link :to="'/article/'+item.id">
                      <div class="inner"><img alt="post-title" :src="item.coverImage"/></div>
                    </router-link>
                  </div>
                  <div class="details">
                    <ul class="meta list-inline mb-3">
                      <li class="list-inline-item"><router-link :to="'/article/'+item.id">{{item.author}}</router-link></li>
                      <li class="list-inline-item"><a href="#" >{{item.bizCategory.name}}</a></li>
                      <li class="list-inline-item">{{item.createTime}}</li>
                    </ul>
                    <h5 class="post-title"><router-link :to="'/article/'+item.id">{{item.title}}</router-link></h5>
                    <p class="excerpt mb-0">{{item.description}}</p>
                  </div>
                </div>
              </div>
              <!-- load more button -->
              <div class="text-center">
                <button class="btn btn-simple" id="read-more" @click="getArticles">阅读更多</button>
              </div>
            </div>
          </div>
          <div class="col-lg-4"><!-- sidebar -->
            <sidebar></sidebar>
          </div>
        </div>
      </div>
    </section>
    <!-- instagram feed -->
    <!--  <div class="instagram">
        <div class="container-xl">&lt;!&ndash; button &ndash;&gt;<a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a>&lt;!&ndash; images &ndash;&gt;
          <div class="instagram-feed d-flex flex-wrap">
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-1.jpg" alt="insta-title" /></a></div>
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-2.jpg" alt="insta-title" /></a></div>
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-3.jpg" alt="insta-title" /></a></div>
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-4.jpg" alt="insta-title" /></a></div>
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-5.jpg" alt="insta-title" /></a></div>
            <div class="insta-item col-sm-2 col-6 col-md-2"><a href="#"><img src="images/insta/insta-6.jpg" alt="insta-title" /></a></div>
          </div>
        </div>
      </div>-->
    <!-- footer -->
    <footer></footer>
<!--    <input id="keywords" th:value="${keywords}">-->
  </div>
</template>

<script>
module.exports={
  name: "search",
  components: {
    'navbar': httpVueLoader('../components/navbar.vue'),
    'footer': httpVueLoader('../components/footer.vue'),
    'sidebar':httpVueLoader('../components/sidebar.vue')
  },
  data() {
    return {
      records: [],
      pageNum:1
    }
  },
  mounted(){
    this.getArticles()
  },
  methods: {
    getArticles(){
      axios.get('/blog/api/articles',{params:{"pageNumber": this.pageNum,"keywords": this.$route.query.keywords,"pageSize": 10}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.records=this.records.concat(data.records);
            this.pageNum++;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    }
  }
}
</script>

<style scoped>

</style>